<template>
  <div  style="width:100%;height:100%" :id="id">
    <Portal to="right-disable"
            v-loading="loading"
             style="width:100%;height:100%"
            :disabled="!queryModelDefaultSetting.showSetting">
      <DashboardInterceptConsumer :gadgetId="id"
                                  shadow="hover"
                                  @mouseenter="mouseenter(true)"
                                  @mouseleave="mouseenter(false)"
                                  :style="{height:gadgetHeight+ 'px',border:0}">
        <el-card shadow="hover"
                 :style="{height:gadgetHeight+ 'px',border:0}">
          <div class="content-card"  style="width:100%;height:100%;">
            <div class="cardHeader"
                 @mouseenter="mouseenter(true)"
                 @mouseleave="mouseenter(false)"
                 v-if="(widgetName && widgetName.trim().length>0) || (gadgetSetting.headerDescription && gadgetSetting.headerDescription.trim().length>0)">
              <GadgetTitle :gadgetSetting="gadgetSetting"
                           :widgetName="widgetName"></GadgetTitle>
              <!-- <div> -->
              <MoreMenu :slicer='slicer'
                        :fitToHeight='fitToHeight'
                        :gadgetId='id'
                        :gadgetType='gadgetInfo.com'
                        @updateQuery="query"
                        :widgetName="widgetName"
                        :businessType="gadgetInfo.businessType"
                        :id="gadgetInfo.id"
                        @showQueryModel="showQueryModel"
                        @fullScreen="fullScreen" />
              <!-- </div> -->
            </div>
             <div v-show="isHasData"
                 class="content el-card__body"
                 :style="{'justify-content': 'center',height:gadgetHeight+ 'px'}">
              <!-- <div> -->
              <div class="main"
                   ref="mainWidth"
                   style="height: 100%">
                <!-- v-if="!gadgetSetting.drillThroughStatus" -->
                <div ref="valueFields"
                     :style="{'height':lineHeight+'px','line-height':lineHeight+'px','display':'inline-block',fontSize:gadgetSetting.valueFontSize + 'px','white-space': 'nowrap',color:gadgetSetting.valueFontColor,'cursor': gadgetSetting.drillThroughStatus&&gadgetSetting.drillThroughStatus?'pointer':'' }"
                     @click="onClick">
                  <!-- {{ datesource[gadgetSetting.valueFieldsName] }} -->
                  {{ comFormatData }}
                  <!-- <div v-html="datesource[gadgetSetting.valueFieldsName]">{{ datesource[gadgetSetting.valueFieldsName] }}</div> -->
                </div><br>
                <div style="text-align: center;display:'inline-block'"
                     :style="{'height':footerHeight+'px',fontSize:footerFontSize + 'px',color:gadgetSetting.footerTitleFontColor}">
                  {{ gadgetSetting.footerTitle }}
                </div>
              </div>
            </div>
            <div v-show="!isHasData"
                 class="gadget-no-newdata">
                    <div class="widgets-no-data">
                    <div :style="{'fontSize':fontSizeStr1}">{{$t('custom.component.gadget.nodata')}}</div>
                    <!-- <div class="widgets-tip"> <a :href="widgetNoDataWiki"  :style="{'fontSize':fontSizeStr2}"
                         target="black">{{$t('custom.component.gadget.nodatatip')}}</a> </div> -->
                  </div>
            </div>
          </div>
        </el-card>
        <Lastupdatetime v-if="currentTime"
                        :currentTime="currentTime"
                        :linkedDatasetList="linkedDatasetList"
                        :errorStatus="errorStatus"
                        @updateQuery="query()">
                        <i v-show="isPlaying"  style="font-size:20px;" class="cuifont icon_alert_filled"></i>
                      </Lastupdatetime>
      </DashboardInterceptConsumer>

    </Portal>
    <model :showSetting="queryModelDefaultSetting.showSetting"
           @queryModelClosed="queryModelClosed"
           @queryModelPreview="queryModelPreview"
           :dataInfo="queryModelDefaultSetting.dataInfo"
           :updateGadget="upgradeGadgetSetting"
           :slicer='slicer' />
    <DrillThrough :gadgetId='id'
                  :pageId='pageId'
                  :queryId="queryId"
                  :slicer="slicer"
                  ref="drill-through"
                  :widgetName='widgetName' />
    <audio :id="`${id}-${pageId}`" :src="soundConfig.sound" type="audio/mpeg" preload="auto">Your browser does not support the audio element.</audio>
  </div>
</template>

<script>
import mixinGadgetViewModule from '@/mixins/gadget-view-module'
import Lastupdatetime from '@/components/last-update-time/index.vue'
// import model from '@/components/gadget/query-model/query-model.vue'
import { defaultGadgetSettingList } from '@/utils/data-json'
import mixinFormatViewModule from '@/mixins/format-gadget-view-module'
// import { debounce } from 'lodash'
import { getDrillthrough } from '@/utils/common'
export default ({
  mixins: [mixinGadgetViewModule, mixinFormatViewModule],
  components: {
    Lastupdatetime, model: () => import('@/components/gadget/query-model/query-model')
  },
  data: function () {
    return {
      datesource: {
        value: '0'
      },
      currentTime: null,
      gadgetSetting: {},
      loading: false,
      autoRefresh: false,
      // lastSyncTime: null,
      queryModelDefaultSetting: {
        showSetting: false,
        dataInfo: {
          businessId: this.pageId,
          gadgetId: this.id,
          gadgetType: 'cardnumbergadget',
          gadgetSetting: this._.find(defaultGadgetSettingList, { gadgetType: 'cardnumbergadget' }).gadgetSetting
        }
      },
      syncTimer: 0,
      timers: null,
      showstatus: false,
      queryId: '',
      queryDrillthrough: {},
      widgetName: '',
      conditionFormat: [],
      // noDataImageUrl: 'https://oss.mspbots.ai/app/gadget/card-number-title-default.png'
      comFormatData: null,
      valueFieldsWidth: null,
      isCenter: false,
      linkedDatasetList: [],
      soundConfig: {},
      soundTimer: null,
      isPlaying: false,
      soundDom: null,
      selectFields: [],
      dataList: []
    }
  },
  watch: {
    autoRefresh (val) {
      if (val) {
        this.autoQuery()
        this.timer = setInterval(() => {
          this.autoQuery()
        }, this.gadgetSetting.time * 1000)
      } else {
        clearInterval(this.timer)
        clearInterval(this.soundTimer)
      }
    },
  },
  computed: {
 
   
    lineHeight () {
      return (this.gadgetHeight - 30) * 0.80
    },
    footerHeight () {
      return (this.gadgetHeight - 30) * 0.20
    },
    footerFontSize () {
      return this.footerHeight * 0.4
    },
    lastSyncTime () {
      if (this.syncTimer > 60) {
        return Math.floor(this.syncTimer / 60) + ' Minte Ago'
      }
      return this.syncTimer + ' Second Ago'
    }
  },
  beforeDestroy () {
    clearInterval(this.timer)
    clearInterval(this.soundTimer)
  },
  // beforeCreate () {
  //   this.$options.components.model = () => import('@/components/gadget/query-model/query-model')
  // },
  created () {
    this.gadgetHeight = this.pageFrom === 'reportLayoutFullScreen' ? window.screen.availHeight-100 :this.pageFromType === 'report' ? ((this.gadgetInfo.h * (this.rolHeight+10)-10) - 40) : this.pageFrom === 'reportLayout' ? ((this.gadgetInfo.h * 22) - (this.gadgetInfo.h * 0.1 *0.02 ) - 45) : ((this.gadgetInfo.h * 23) - 11)
    this.gadgetWidth = this.pageFrom === 'reportLayoutFullScreen' ? window.screen.width :this.pageFromType === 'report' ? ((this.gadgetInfo.w * this.comPageWidth/12)) : (this.gadgetInfo.w * 7) * 19
    // this.autoQuery()
    this.subscribeMessage('runReport', () => {
      this.query(this.refreshCount > 0 ? 'auto' : false)
      this.refreshCount = this.refreshCount + 1
    })
    this.$store.state.isWidget = false
  },
  methods: {
    fontSizeReduce () {
      this.gadgetSetting.valueFontSize -= 5
      this.gadgetSetting.footerTitleFontSize = parseInt(this.gadgetSetting.valueFontSize) / 8
      this.$forceUpdate()
      this.$nextTick(() => {
        if (this.$refs['valueFields']) {
          this.valueFieldsWidth = this.$refs.valueFields.clientWidth
          if ((this.valueFieldsWidth >= this.gadgetWidth - 11) && (this.gadgetSetting.valueFontSize > 12)) {
            this.fontSizeReduce()
          }
        }
      })
    },
    queryModelClosed () {
      this.queryModelDefaultSetting.showSetting = false
      this.query()
    },
    showQueryModel () {
      this.queryModelDefaultSetting.showSetting = true
    },
    showBtns () {
      this.showstatus = !this.showstatus
    },
    resized (i, newH, newW, newHPx, newWPx) {
      this.gadgetWidth = newWPx
      this.gadgetHeight = this.pageFromType === 'report' ? ((newH * (this.rolHeight+10)-10) - 40) : (newH * 22) - (newH * 0.1 * 0.02) - 45
      if (this.gadgetWidth < this.gadgetHeight) {
        this.gadgetSetting.valueFontSize = Number(this.gadgetWidth) / 1.7
      } else {
        this.gadgetSetting.valueFontSize = Number(this.gadgetHeight) / 1.7
      }
      this.gadgetSetting.footerTitleFontSize = parseInt(this.gadgetSetting.valueFontSize) / 8
    },
    onClick () {
      this.findOriginData(getDrillthrough(this.selectFields,this.dataList[0],this.gadgetSetting.valueFieldsName))
    },
    query (e) {
      if (e !== 'auto') {
        this.loading = true
      }
      this._.merge(this.gadgetSetting, this.queryModelDefaultSetting.dataInfo.gadgetSetting)
      this.queryModelDefaultSetting.dataInfo.formSetting = {}
      var _self = this
      var obj = JSON.parse(JSON.stringify(this.slicer))
      let tempObj = this.returnReportLinkParam()
      if (tempObj['name'] && this.slicer['name'] && tempObj['name'] === this.slicer['name']) delete this.slicer['name']
      for (var key in obj) {
        if (key === 'id') {
          delete obj.id
        }
      }
      var param = {
        ...obj,
        code: this.code,
        gadgettype: this.wgadgettype,
        widgetName: this.wName,
        slicer: { ...this.slicer },
        pageId: this.pageId,
        gadgetId: this.id,
        filter: this.getFilterStr(),
        type: this.filterType
      }
      this.$interface.reports.getReportDataInfo(param).then(({ data: res }) => {
        _self.verifyHasData(res)
        if (res.config) {
            if(this._.get(this.dataInfo,'gadgetSetting.dynamic',false)){
            _self.gadgetSetting =  this.dataInfo.gadgetSetting
          }else{
            _self.gadgetSetting = Object.assign({}, _self._.merge(_self.gadgetSetting, res.config))
          }
          _self.autoRefresh = _self.gadgetSetting.IsAutoRefresh
          if (_self.autoRefresh) {
            this.computedSyncTimer()
          }
          _self.conditionFormat = res.conditionFormat.reverse()
        }
        if (res.name) {
          _self.widgetName = res.name
        } else if (this.wName){
          _self.widgetName = this.wName
        }  else {
          _self.widgetName = _self.gadgetSetting.headerTitle
        }
        if (res.data && res.data.length > 0) {
          try {
            _self.$parent.$parent.$parent.$parent.$parent.$parent.selectFields = res.selectFields
          } catch (error) {

          }
          this.selectFields = res.selectFields
          this.dataList = res.data
          let tempDataList = res.data
          let objList = res.selectFields.find(item => { return item.alias === res.config.valueFieldsName })
          _self.queryDrillthrough = objList || {}
          _self.queryId = _self.queryDrillthrough ? _self.queryDrillthrough.queryId : ''
          _self.datesource[_self.gadgetSetting.valueFieldsName] = tempDataList[0][_self.gadgetSetting.valueFieldsName]
          if (_self.queryDrillthrough) {
            _self.datesource[_self.queryDrillthrough.alias] = tempDataList[0][_self.queryDrillthrough.alias]
            var tempAlias = _self.datesource[_self.queryDrillthrough.alias]
            if (!tempAlias && tempAlias !== false && tempAlias !== 0) {
              _self.queryDrillthrough.alias = 'dimension1'
              _self.datesource[_self.queryDrillthrough.alias] = tempDataList[0][_self.queryDrillthrough.alias]
            }
          }
          _self.compare()
          _self.play()
          _self.comFormatData = _self.setFormatFunctionForCardNumber(res.selectFields, res.data, _self.gadgetSetting.valueFieldsName)
          if (_self.gadgetWidth < _self.gadgetHeight) {
            _self.gadgetSetting.valueFontSize = Number(_self.gadgetWidth) / 1.7
          } else {
            this.gadgetSetting.valueFontSize = Number(this.gadgetHeight) / 1.7
          }
          // this.gadgetSetting.valueFontSize=(Number(_self.gadgetWidth)/100)*(Number(_self.gadgetHeight)/150)*1.5
          _self.linkedDatasetList = res.datasetSync
          this.gadgetSetting.footerTitleFontSize = parseInt(this.gadgetSetting.valueFontSize) / 8
          this.fontSizeReduce()
        }
        // eslint-disable-next-line handle-callback-err
      }).catch((error) => {
           if (this.wName) {
          this.widgetName = this.wName
        }
        this.isHasData = false
        if (error.response && error.response.status === 504) {
          this.errorStatus = '504'
          this.gadgetMessageBus.$emit(this.pageId + 'stopautorefresh')
        }
      }).finally(() => {
        this.currentTime = new Date()
        this.autoRefreshQuery(e)
        this.updateGadgetLoadingStatus(!this.loading)
      })
    },
    computedSyncTimer () {
      this.syncTimer = 0
      clearInterval(this.timers)
      this.timers = setInterval(() => {
        this.syncTimer += 1
      }, 1000)
    },
    compare () {
      var _self = this
      var arr = _self.conditionFormat
      var res = arr.filter(item => {
        if (item.dataForm.filters.rules.length !== 0) {
          return item.dataForm.filters.rules[0].key === _self.gadgetSetting.valueFieldsName
        }
      })
      if (res.length > 0) {
        _self.gadgetSetting.IsCompare = false
        res.forEach(it => {
          if (it) {
            let str = ''
            it.dataForm.filters.rules.forEach(ii => {
              // eslint-disable-next-line
              var val = _self.datesource[_self.gadgetSetting.valueFieldsName].toString().replace(/[\$\,]/g, '')
              if (val.includes('%')) {
                // eslint-disable-next-line
                val = Number(val.replace(/%/g, '')) / 100
              } else if (val.indexOf('k') > -1) {
                // eslint-disable-next-line
                val = Number(val.replace(/k/g, '')) * 1000
              }
              if (ii.opt === '==' || ii.opt === '!=') {
                if (!str) {
                  str += `("${(val).toString()}"  ${ii.opt}   "${(ii.value).toString()}")`
                } else {
                  if (it.dataForm.filters.condition === 'and') {
                    str += `&& ("${(val).toString()}"  ${ii.opt}   "${(ii.value).toString()}")`
                  } else {
                    str += `|| ("${(val).toString()}"   ${ii.opt}   "${(ii.value).toString()}")`
                  }
                }
              } else {
                if (!str) {
                  str += (Number(val) + ii.opt + Number(ii.value))
                } else {
                  if (it.dataForm.filters.condition === 'and') {
                    str += `&& (${Number(val)}   ${ii.opt}   ${Number(ii.value)})`
                  } else {
                    str += `|| (${Number(val)}   ${ii.opt}   ${Number(ii.value)})`
                  }
                }
              }
            })
            // eslint-disable-next-line
            let res1 = eval(`${str}`)
            if (res1) {
              _self.$set(_self.gadgetSetting, 'valueFontColor', it.textColor)
              _self.soundConfig = it
            }
          }
        })
      }
      // if (_self.gadgetSetting.IsCompare) {
      //   switch (_self.gadgetSetting.colorCheck) {
      //     case 1:
      //       if (Number(_self.datesource[_self.gadgetSetting.valueFieldsName]) > _self.gadgetSetting.maximum) {
      //         _self.gadgetSetting.valueFontColor = _self.gadgetSetting.oneColor
      //       }
      //       break
      //     case 2:
      //       if (Number(_self.datesource[_self.gadgetSetting.valueFieldsName]) < _self.gadgetSetting.maximum) {
      //         _self.gadgetSetting.valueFontColor = _self.gadgetSetting.twoColor
      //       }
      //       break
      //     case 3:
      //       if (Number(_self.datesource[_self.gadgetSetting.valueFieldsName]) <= _self.gadgetSetting.maximum) {
      //         _self.gadgetSetting.valueFontColor = _self.gadgetSetting.threeColor
      //       }
      //       break
      //     case 4:
      //       if (Number(_self.datesource[_self.gadgetSetting.valueFieldsName]) >= _self.gadgetSetting.maximum) {
      //         _self.gadgetSetting.valueFontColor = _self.gadgetSetting.fourColor
      //       }
      //       break
      //     case 5:
      //       if (Number(_self.datesource[_self.gadgetSetting.valueFieldsName]) === _self.gadgetSetting.maximum) {
      //         _self.gadgetSetting.valueFontColor = _self.gadgetSetting.fiveColor
      //       }
      //       break
      //     case 6:
      //       if (Number(_self.datesource[_self.gadgetSetting.valueFieldsName]) >= _self.gadgetSetting.minimum && Number(_self.datesource[_self.gadgetSetting.valueFieldsName]) <= _self.gadgetSetting.maximum) {
      //         _self.gadgetSetting.valueFontColor = _self.gadgetSetting.middleColor
      //       }
      //       if (Number(_self.datesource[_self.gadgetSetting.valueFieldsName]) >= _self.gadgetSetting.minimum && Number(_self.datesource[_self.gadgetSetting.valueFieldsName]) >= _self.gadgetSetting.maximum) {
      //         _self.gadgetSetting.valueFontColor = _self.gadgetSetting.maxColor
      //       }
      //       if (Number(_self.datesource[_self.gadgetSetting.valueFieldsName]) <= _self.gadgetSetting.minimum && Number(_self.datesource[_self.gadgetSetting.valueFieldsName]) <= _self.gadgetSetting.maximum) {
      //         _self.gadgetSetting.valueFontColor = _self.gadgetSetting.minColor
      //       }
      //       break
      //     default:
      //       break
      //   }
      // }
    },
    autoQuery () {
      this.refreshQurey()
    },
    refreshQurey () {
      var _self = this
      var obj = JSON.parse(JSON.stringify(this.slicer))
      let tempObj = this.returnReportLinkParam()
      if (tempObj['name'] && this.slicer['name'] && tempObj['name'] === this.slicer['name']) delete this.slicer['name']
      for (var key in obj) {
        if (key === 'id') {
          delete obj.id
        }
      }
      var param = {
        ...obj,
        slicer: { ...this.slicer },
        pageId: this.pageId,
        gadgetId: this.id,
        type: this.filterType
      }
      _self.autoRefresh = _self.gadgetSetting.IsAutoRefresh
      this.$interface.reports.getReportDataInfo(param).then(({ data: res }) => {
        this.currentTime = new Date()
        if (res.config) {
          _self.gadgetSetting = Object.assign({}, _self._.merge(_self.gadgetSetting, res.config))
          _self.conditionFormat = res.conditionFormat.reverse()
        }
        if (res.name) {
          _self.widgetName = res.name
        } else {
          _self.widgetName = _self.gadgetSetting.headerTitle
        }
        if (res.data && res.data.length > 0) {
          let tempDataList = res.data
          let objList = res.selectFields.find(item => { return item.alias === res.config.valueFieldsName })
          _self.queryDrillthrough = objList || {}
          _self.queryId = _self.queryDrillthrough ? _self.queryDrillthrough.queryId : ''
          _self.datesource[_self.gadgetSetting.valueFieldsName] = tempDataList[0][_self.gadgetSetting.valueFieldsName]
          if (_self.queryDrillthrough) {
            _self.datesource[_self.queryDrillthrough.alias] = tempDataList[0][_self.queryDrillthrough.alias]
            var tempAlias = _self.datesource[_self.queryDrillthrough.alias]
            if (!tempAlias) {
              _self.queryDrillthrough.alias = 'dimension1'
              _self.datesource[_self.queryDrillthrough.alias] = tempDataList[0][_self.queryDrillthrough.alias]
            }
          }
          _self.compare()
          _self.play()
          _self.linkedDatasetList = res.datasetSync
          _self.comFormatData = _self.setFormatFunctionForCardNumber(res.selectFields, res.data, _self.gadgetSetting.valueFieldsName)
        }
        this.computedSyncTimer()
        if (this.gadgetWidth < this.gadgetHeight) {
          this.gadgetSetting.valueFontSize = Number(this.gadgetWidth) / 1.7 + 'px'
        } else {
          this.gadgetSetting.valueFontSize = Number(this.gadgetHeight) / 1.7 + 'px'
        }
        this.gadgetSetting.footerTitleFontSize = parseInt(this.gadgetSetting.valueFontSize) / 8
        this.fontSizeReduce()
      })
    },
    play () {
      let _self = this
      _self.$nextTick(() => {
        _self.soundDom = document.getElementById(`${this.id}-${this.pageId}`)
        if (_self.soundConfig.playAlertSound && _self.soundConfig.sound) {
          clearInterval(_self.soundTimer)
          if (_self.soundConfig.repeatSound && _self.soundConfig.repeatTimes) {
            _self.isPlaying = true
            const p = _self.soundDom.play()
            p.catch(() => {
              _self.notify()
            })
            setTimeout(() => {
              _self.isPlaying = false
            }, 2000)
            _self.soundTimer = setInterval(() => {
              var hidden
              if (typeof document.hidden !== 'undefined') {
                hidden = 'hidden'
              } else if (typeof document.mozHidden !== 'undefined') {
                hidden = 'mozHidden'
              } else if (typeof document.msHidden !== 'undefined') {
                hidden = 'msHidden'
              } else if (typeof document.webkitHidden !== 'undefined') {
                hidden = 'webkitHidden'
              }
              if (!document[hidden]) {
                if ((_self.$store.state.sidebarMenuActiveName && _self.$store.state.sidebarMenuActiveName.includes(_self.pageId)) || window.location.pathname === '/portalDashboard' || window.location.pathname === '/portalPageDashboard' || window.location.pathname === '/publicReport' || window.location.pathname === '/publicReportPdf' || window.location.pathname === '/present' || (window.location.pathname === '/home' && _self.pageId === _self.$store.state.user.homePage)) {
                  _self.isPlaying = true
                  _self.soundDom.play()
                }
              }
              setTimeout(() => {
                _self.isPlaying = false
              }, 2000)
            }, _self.soundConfig.repeatTimes * 60000)
          } else {
            _self.isPlaying = true
            const p = _self.soundDom.play()
            p.catch(() => {
              _self.notify()
            })
            setTimeout(() => {
              _self.isPlaying = false
            }, 2000)
          }
        }
      })
    },
    notify () {
      this.$notify({
        title: 'warning',
        message: 'Alert sound is triggered, please refresh the page.',
        type: 'warning',
        offset: 150
      })
    }
  },
  mounted() {
    this.$erd.listenTo(this.$refs['mainWidth'], element => {
      this.$nextTick(() => {
        if (this.$refs['mainWidth']) {
          this.gadgetWidth = this.$refs.mainWidth.clientWidth
        }
        this.gadgetSetting.valueFontSize = (Number(this.gadgetHeight) / 1.7)
        this.fontSizeReduce()
      })
    })
  },
})
</script>
<style lang="scss" scoped>
.content-card {
  position: relative;
  .gadget-no-newdata {
    position: absolute;
    top: 45%;
    left: 0;
    right: 0;
    margin: 0 auto;
    .widgets-no-data {
      display: flex;
      flex-direction: column;
      align-items: center;
      .widgets-tip {
        margin-top: 5px;
      }
    }
  }
}
</style>
<style scoped>
.el-card ::v-deep .el-card__body {
  padding: 0px !important;
  width: 100%;
  height: 100%;
}

.el-card ::v-deep .el-divider--horizontal {
  margin: 3px 0 !important;
}

.content {
  display: flex;
  /* justify-content: space-between; */
  flex-direction: column;
  height: 100%;
  background: transparent;
}

.header {
  display: flex;
  height: 32px;
  justify-content: space-around;
  text-align: center;
  background: no-repeat;
  background-size: cover;
}

.main {
  display: block;
  /* justify-content: space-around; */
  text-align: center;
  /* margin-top: 35px; */
  /* padding: 5px 0 !important; */
  /*height: 85px;*/
}

.footer {
  text-align: left;
}

.threepoints {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cardHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 16px;
  border-bottom: 1px solid #eee;
  position: relative;
}

/* .cardHeader > span {
  display: inline-block;
  width: calc(100% - 110px);
} */

.cardIcon {
  font-size: 16px;
  font-weight: 600;
  margin-left: 10px;
  position: relative;
  top: -2px;
}
/*.btns {
  display: none;
}

.el-card:hover .btns {
  display: block;
}

.el-icon-more {
  cursor: pointer;
}

.oprateOptions {
  width: 132px;
  position: absolute;
  top: 15px;
  right: 20px;
  z-index: 1001;
  list-style: none;
  border: 1px solid #eee;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  background: #fff;
  padding: 5px;
  border-radius: 5px;
}

.oprateOptions > li {
  height: 35px;
  line-height: 35px;
  padding: 0 45px;
  font-size: 14px;
  color: #303133;
  list-style: none;
  cursor: pointer;
  position: relative;
  transition: border-color .3s, background-color .3s, color .3s;
  box-sizing: border-box;
  white-space: nowrap;
}

.oprateOptions > li:hover {
  background: #e8f7f6;
}*/
</style>
